<template>
    <div class="contact">
        <div class="nav "  >
            <span class="lt mui-icon mui-icon-back "></span>
            <p>京东登录</p>
        </div>
        <div class="contact-input">
            <input type="text" value placeholder="用户名/邮箱/已验证手机">

            <div  class="contact-rt">
                <input type="text" value placeholder="请输入密码" class="input3">
                <span class="rt mui-icon mui-icon-arrowdown"></span>
                <button>忘记密码</button>
                <a href="#" class="two">登录</a>
                <a href="" class="one">一键登录</a>
            </div>
        </div>
        <div class="yanzhen">
            <a href="#">短信验证码登录</a>
            <a href="#">手机快速注册</a>
        </div>
        <div class="floot">
            <div class="floot-bd">
                <h4>其他登录方式</h4>
            </div>
        </div>
    </div>
</template>


<script>

</script>

<style lang="scss" scoped>
    .contact{
        background-color: #fff;
        height: 686px;

    .nav{


        text-align: center;
        height: 40px;


        p{
            font-size: 16px;
            color: #000000;
            line-height: 40px;
            margin: 0;
        }
        .lt{
            margin-top: 8px;
            float: left;
        }
        .rt{
            margin-top: 8px;
            float: right;
            margin-right: 5px;
        }
    }
        .contact-input {
            padding: 10px 25px 0 25px;
            margin-top: 20px;

            input {
                border: none;
                border-bottom: 2px solid #efefef;
                margin-bottom: 20px;
            }
            .contact-rt {
                position: relative;
                .two{
                    color: #ffffff;
                    background-color: #ffbcb3;
                    border-radius: 30px;

                }
                .one{
                    color: red;
                    background-color: #ffffff;
                    border-radius: 30px;
                    border: 1px solid red;
                }
                a{
                    display: block;
                    width: 100%;
                    height: 50px;
                    text-align: center;
                    line-height: 50px;
                    margin-bottom: 10px;
                }
                .input3 {
                    padding: 0 150px 0 0;
                    display: inline-block;
                    margin-bottom: 30px;

                }

                .rt {
                    position: absolute;
                    width: 24px;
                    height: 24px;
                    top: 0;
                    right: 90px;

                }
                button{
                    position: absolute;
                    top: 0;
                    right: 0;
                    border: none;
                    border-left: 1px solid #eeeeee;
                }
            }
        }
        .yanzhen{
            padding: 20px 30px 0 30px;
            display: flex;
            justify-content: space-between;
           a{
               color: #999999;
               font-size: 14px;
           }
        }
        .floot{
            padding: 65px 30px 0 30px;
            .floot-bd{
                border-top: 1px solid #efefef;
                position: relative;
                h4{
                    position: absolute;
                    top: -13px;
                    left: 50%;
                    transform: translateX(50%);
                    -webkit-transform: translateX(-50%);
                    font-size: 14px;
                    color: #999999;
                    font-weight: 400;
                }
            }
        }
    }
</style>